import {useState} from "react";
import Chat from "./Chat";
import ContactList from "./ContactList"

const contacts : Contact[]= [
	{ name: 'Taylor', email: 'taylor@mail.com' },
	{ name: 'Alice', email: 'alice@mail.com' },
	{ name: 'Bob', email: 'bob@mail.com' }
];

type Contact = {
	name: string;
	email: string;
};

const Messenger = () => {
	const  [to, setTo] = useState(contacts[0]);
	return (
		<div style={{display: 'flex'}}>
			<ContactList
				contacts={contacts}
				selectContact={to}
				onSelect={(contact) => setTo(contact)}
			/>
			<Chat key={to.email} contact={to} />
		</div>
	);
};

export default Messenger;
export type { Contact };